Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Preserve type attribute of the ol element #72

Closed
wants to merge 1 commit into from
Closed

Preserve type attribute of the ol element #72

wants to merge 1 commit into from

Conversation

neupauer
Copy link
Contributor

This solution preserves the type attribute of the ol element.

Due to css case-insensitivity I came up with a solution like this:

'ol[type=A]': {
  '--list-counter-style': 'upper-alpha',
},
'ol[type=a]': {
  '--list-counter-style': 'lower-alpha',
},
'ol[type=A s]': {
  '--list-counter-style': 'upper-alpha',
},
'ol[type=a s]': {
  '--list-counter-style': 'lower-alpha',
},
'ol[type=I]': {
  '--list-counter-style': 'upper-roman',
},
'ol[type=i]': {
  '--list-counter-style': 'lower-roman',
},
'ol[type=I s]': {
  '--list-counter-style': 'upper-roman',
},
'ol[type=i s]': {
  '--list-counter-style': 'lower-roman',
},
'ol[type=1]': {
  '--list-counter-style': 'decimal',
}

Browsers, that supports case-sensitive modifier in attribute selector (Firefox) will use:

'ol[type=A s]': {
  '--list-counter-style': 'upper-alpha',
},
'ol[type=a s]': {
  '--list-counter-style': 'lower-alpha',
},

so this will behave correctly:

<ol type="a"></ol>
<ol type="A"></ol>

Browsers, that does not supports case-sensitive modifier in attribute selector, but support case-sensitivity will use:

'ol[type=A]': {
  '--list-counter-style': 'upper-alpha',
},
'ol[type=a]': {
  '--list-counter-style': 'lower-alpha',
},

And at last browsers, that does not supports case-sensitivity will use the last selector:

'ol[type=a]': {
  '--list-counter-style': 'lower-alpha',
},

Similar for type="i" and type="I".

Links:
W3C | Selectors | Case-sensitivity
MDN | Attribute selectors

Resolve #70

RobinMalfait added a commit that referenced this pull request Jan 8, 2021
@RobinMalfait @neupauer
keep type on ol elements in mind
18ce863 
Closes: #72
Closes: #70

Co-authored-by: Peter Neupauer <peter@neupauer.sk>
@RobinMalfait RobinMalfait mentioned this pull request Jan 8, 2021
Merged
@drdogbot7
Copy link

Is this method actually working for people? It seems like it ought to, but it doesn't work for me when I test it.

https://codepen.io/drdogbot7/pen/QWKzvpE

Chrome and Firefox both ignore the 's' rules, and treat the others as case-insensitive.

Maybe it comes down to this, which is unfortunately a bit vague.

Note: Some document models normalize case-insensitive attribute values at parse time such that case-sensitive matching is impossible. Case-sensitive matching via s flags is only possible in systems that preserve the original case.
https://drafts.csswg.org/selectors-4/#attribute-case

@neupauer
Copy link
Contributor Author

Unfortunately, the s modifier does not work in all browsers. It should work in Firefox from version 66 see MDN - Browser compatibility, Chrome (Edge) has a bug 1041095.

Chrome and Firefox both ignore the 's' rules, and treat the others as case-insensitive.

Firefox worked fine when I tested it( Firefox on MacOS v83.0 )

@drdogbot7
Copy link

Ok, you're right, it does work in the latest Firefox. Presumably Chrome will implement at some point.

@neupauer
Copy link
Contributor Author

neupauer commented Feb 8, 2021

Hi @drdogbot7 I found a bug, why it was not working in Firefox for you. This PR #126 introduce little bug, should be fixed in PR #137. I haven't seen it before because I used my own styles in my project.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

The type attribute of the ordered list is ignored
2 participants
@neupauer @drdogbot7